<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script type="text/javascript" src="../js/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../layui/layui.js"></script>
    <!-- 动态控制登录状态的显示-->
    <script type="text/javascript" src="../js/myjs/common/navbar.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
</head>
<body>

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=5jSxXmReQmqksBWYwvWGItrtdSce1EvU"></script>

<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-container">
            <div class="layui-logo">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;咸阳市红色资源体验平台</div>
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item layui-this"><a href="/mausoleum/html/mmap.html">平台首页</a></li>
                <li class="layui-nav-item"><a href="/mausoleum/html/mintroduction.html">宝塔介绍</a></li>
                <li class="layui-nav-item"><a href="/mausoleum/html/mpicture.html">实景风貌</a></li>
                <li class="layui-nav-item" id="manage" style="display: none"><a href="/mausoleum/html/admin/user-manage.html">后台管理</a></li>
            </ul>
            <div id="login0" hidden="hidden">
                <ul class="layui-nav layui-layout-right">
                    <li class="layui-nav-item"><a href="/mausoleum/html/login.html">登录&nbsp;/&nbsp;注册</a></li>
                </ul>
            </div>
            <div id="login1" hidden="hidden">
                <ul class="layui-nav layui-layout-right">
                    <li class="layui-nav-item"  lay-submit lay-filter="savecoord_submit"><a href="javascript:">保存坐标<span id="xy"></span>
                        <input type="text" id="x" class="save-input1" required lay-verify="required|x" lay-reqtext="请先选择坐标点" style="display:none" />
                        <input type="text" id="y" class="save-input2" required lay-verify="required|y" lay-reqtext="请先选择坐标点" style="display:none"/></a></li>

                    <li class="layui-nav-item"><a href="/mausoleum/html/minfo-add.html">上传资料</a></li>
                    <li class="layui-nav-item"><a id="me">欢迎使用：</a>
                        <dl class="layui-nav-child" style="text-align: center">
                            <dd id="giveFeedback"><a href="javascript:giveFeedback()">我要反馈</a></dd>
                            <dd id="modifyPassword"><a href="javascript:modifyPassword()">修改密码</a></dd>
                            <dd id="deleteSession"><a href="javascript:deleteSession()">退出平台</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div id="container">
</div>


<script type="text/javascript">
    var map = new BMapGL.Map("container");    // 创建Map实例
    map.centerAndZoom('西安市',8); // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式

    map.addEventListener("click",function(e){
        var xpoint = e.point.latLng.lng.toString();
        var ypoint = e.point.latLng.lat.toString();
        console.log(xpoint);
        console.log(ypoint);
        $('#x').val(xpoint.substring(0,xpoint.indexOf(".") + 7));
        $('#y').val(ypoint.substring(0,ypoint.indexOf(".") + 7));
        $('#xy')[0].innerText='('+xpoint.substring(0,xpoint.indexOf(".") + 3)+','+ypoint.substring(0,ypoint.indexOf(".") + 3)+')';

    });
    $.get("/mausoleum/coordinate/getMCList",{},function(result){
        //获取坐标数据
        var dataList = result.data;
        for(let i = 0;i<dataList.length;i++){
            var data = dataList[i];
            var opts = {
                width: 400,     // 信息窗口宽度
                height: 200,     // 信息窗口高度
                title: data.name, // 信息窗口标题
                message: "这里是" + data.details
            }
            //设置标记红点的方法
            var createMark = function(lng, lat, info_html,remark) {
                var point = new BMapGL.Point(lng,lat)
                var _marker = new BMapGL.Marker(point);
                _marker.addEventListener("click", function(e) {
                    //result存放所有的信息
                    let index = result.data[i].coordinateId;
                    //点击显示详情
                    // this.openInfoWindow(new BMapGL.InfoWindow(remark,info_html));
                    //console.log(i,lat, info_html)
                    var url = "/mausoleum/html/minfo.html?mInfoId="+index;
                    window.location.href = url;

                });
                return _marker;
            };

            var marker =createMark(data.x,data.y,opts,data.details);
            map.addOverlay(marker);
            var label = new BMapGL.Label(data.name, { offset: new BMapGL.Size(30, -20) });
            label.setStyle({
                color: "White",
                fontSize: "14px",
                backgroundColor: "#5CACEE",
                border: "0"
            });
            marker.setLabel(label);
        }
    });


    layui.use(['form', 'layer', 'flow'], function () {
        var form = layui.form, layer = layui.layer, flow = layui.flow;

        var html = '<option value="0" selected>其他地标</option>';
        $.getJSON('/mausoleum/minfo/getList', {isHtml : false}, function (result) {
            var data = result.data;
            $.each(data, function (index, item) {
                if (item.coordinateId == 0) {
                    html += '<option value="' + item.mInfoId + '">' + item.name + '</option>';
                }
            });
        });
        //显示提交表单
        form.on('submit(savecoord_submit)', function (data) {
            layer.open({
                type: 1,
                skin: 'layui-layer-rim',
                area: ['380px', '250px'],
                content: '<div id="coordinfo" class="layui-form layui-form-pane" style="padding: 20px;"> ' +
                    '<form method="post"> ' +
                    '<div class="layui-form-item">' +
                    '<label class="layui-form-label">坐标所属</label>' +
                    '<div class="layui-input-block">' +
                    '<select name="belong" id="belong" lay-filter="belong" lay-search>' +
                    html +
                    '</select>' +
                    '</div>' +
                    '</div>' +
                    '<div class="layui-form-item"> ' +
                    '<label class="layui-form-label">坐标备注</label> ' +
                    '<div class="layui-input-block"> ' +
                    '<input type="text" name="remark" id="remark" placeholder="填写" autocomplete="off" class="layui-input">' +
                    '</div> ' +
                    '</div> ' +
                    '<div class="layui-form-item"> ' +
                    '<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="savecoord2_submit">立即提交</button> ' +
                    '</div>' +
                    '</form> ' +
                    '</div>'
            });
            form.render();
            form.on('select(belong)', function (data) {
                if (data.value != 0) {
                    $("#remark").attr('disabled', 'disabled');
                    $("#remark").attr('style', 'cursor:not-allowed');
                } else {
                    $("#remark").removeAttr('disabled', 'disabled');
                    $("#remark").removeAttr('style', 'cursor:not-allowed');
                }
            });

            //提交给后台
            form.on('submit(savecoord2_submit)', function (data) {
                var url = '/mausoleum/audit/save';
                $.post(url, {
                    auditType: data.field.belong == 0 ? 4 : 5,
                    belongId: data.field.belong,
                    fieldOne: $('#x').val(),
                    fieldTwo: $('#y').val(),
                    fieldThree: data.field.belong == 0 ? data.field.remark : $("#belong option:selected").text()
                }, function (result) {
                    if (result.code == 0) {
                        layer.closeAll();
                        layer.msg('提交成功，请耐心等待审核', {icon: 6});
                    } else {
                        layer.msg(result.msg, {icon: 5, anim: 6});
                    }
                });
                return false;
            });
        });
    });

</script>

</body>
</html>

